.settings {
	display: flex;
	width: 100%;
	height: 100vh;
	position: fixed;
	animation-fill-mode: forwards;
	z-index: 5;
	border-radius: var(--edge-radius);

	.sidebar-minimized {
		.settings-sidebar-item {
			span {
				opacity: 0;
			}
			img {
				opacity: 1;
				width: initial !important;
			}
		}
		.exit-setting-btn {
			.settings-sidebar-heading {
				opacity: 0;
			}
			.exit-setting-icon {
				font-size: xxx-large;
			}
		}
	}

	.settings-sidebar {
		border-radius: var(--edge-radius) 0 0 var(--edge-radius);
		.settings-sidebar-header {
			padding: 1rem;
			text-align: left;
		}

		.settings-sidebar-item {
			display: block;
			margin: 0.5rem;
			padding: 0.7rem;
			cursor: pointer;
			img {
				width: 1.5rem;
				vertical-align: middle;
				margin-right: 1rem;
			}
		}
		.active {
			border-radius: 5px;
		}
	}
	.settings-main {
		flex: 4;
		padding: 1rem;
		overflow-y: auto;
		border-radius: 0 var(--edge-radius) var(--edge-radius) 0;
		select {
			background: inherit;
			padding: 0.25rem 0.5rem;
			border-radius: 2px;
			color: inherit;
			font-size: 1rem;
		}

		.toggle {
			position: relative;
			display: inline-block;
			width: 52px;
			height: 26px;
			cursor: pointer;
		}

		.toggle input {
			opacity: 0;
			width: 0;
			height: 0;
		}

		.toggle-slider {
			position: absolute;
			cursor: pointer;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: #ccc;
			-webkit-transition: 0.4s;
			transition: 0.4s;
			border-radius: 34px;
		}

		.toggle-slider:before {
			position: absolute;
			content: '';
			height: 18px;
			width: 18px;
			left: 4px;
			bottom: 4px;
			background-color: white;
			-webkit-transition: 0.4s;
			transition: 0.4s;
			border-radius: 50%;
		}

		input:checked + .toggle-slider {
			background-color: #2196f3;
		}

		input:focus + .toggle-slider {
			box-shadow: 0 0 1px #2196f3;
		}

		input:checked + .toggle-slider:before {
			-webkit-transform: translateX(26px);
			-ms-transform: translateX(26px);
			transform: translateX(26px);
		}

		.toggle-label {
			position: absolute;
			left: 60px;
			top: 4px;
			width: calc(75vw - 80px);
		}

		.toggle-box {
			margin: 10px 0;
		}
		.transparency-slider {
			width: 15rem;
		}
	}

	.exit-setting-btn {
		border-radius: var(--edge-radius) 0 0 0;
		cursor: pointer;
	}
	.exit-setting-icon {
		font-size: 1.5rem;
	}
	.settings-title {
		margin: 1.5rem 0 0.5rem 0;
	}
	.settings-subtitle {
		font-family: sans-serif;
		margin: 1rem 0;
	}

	.settings-about {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: 80vw;
	}
	.settings-about-header {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		img {
			width: 30%;
		}

		h1 {
			margin-top: 0px;
		}
	}

	.settings-about-caption {
		font-size: 0.8rem;
		font-style: italic;
	}

	.settings-about-content {
		width: 30vw;

		ul {
			list-style: none;
			display: flex;
			align-content: center;
			flex-direction: column;
			justify-content: center;
			padding-left: 0;

			li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #d5d2d2;
				padding: 10px;
				margin: 2px;
				cursor: pointer;

				&:hover {
					transform: scale(1.01);
				}
			}
		}
	}

	.settings-about-footer {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.settings-about-link-btn {
		box-sizing: border-box;
		appearance: none;
		background-color: transparent;
		border: 2px solid inherit;
		border-radius: 0.6em;
		cursor: pointer;
		display: flex;
		align-self: center;
		line-height: 1;
		padding: 0.8em 0.8em;
		text-decoration: none;
		text-align: center;
		margin: 0 5px;
		text-decoration: none;
		color: inherit;

		background: {
			image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
			position: 100%;
			size: 400%;
		}
		transition: background 300ms ease-in-out;

		&:hover {
			background-position: 0;
			color: black;
		}
	}

	.sidebar-text {
		margin: 0 0.2rem;
		padding: 0 !important;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.number-ctrl {
		width: fit-content;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		.number-ctrl-minus {
			border-radius: 25% 0 0 25%;
		}
		.number-ctrl-plus {
			border-radius: 0 25% 25% 0;
		}
		.number-ctrl-minus,
		.number-ctrl-plus {
			text-align: center;
			width: 2rem;
			font-size: 1.5rem;
			height: 2rem;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
		.number-ctrl-input {
			width: 3rem;
			height: 1.5rem;
			text-align: center;
			border: none;
			outline: none;
			font-size: 1.5rem;
			padding: 0.25rem;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			&::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}
	}
}

@keyframes open-setting {
	0% {
		top: 100%;
	}
	100% {
		top: 0%;
	}
}

@keyframes close-setting {
	0% {
		top: 0%;
	}
	100% {
		top: 100%;
	}
}

[data-tooltip] {
	cursor: pointer;
}

[data-tooltip]:hover:before {
	content: attr(data-tooltip);
	position: absolute;
	padding: 5px 10px;
	margin: -3px 0 0 30px;
	background: #000;
	color: white;
	border-radius: 3px;
}

[data-tooltip]:hover:after {
	content: '';
	position: absolute;
	margin: 6px 0 0 3px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 10px solid #000;
	border-bottom: 5px solid transparent;
}
